<template >
  <div
    class="warpper"
    id="home"
    :style="scale"
  >
    <div class="header">
      <div class="header-title pr">
        <img
          src="../assets/header.png"
          alt=""
        />
        <div class="title">云集中运营平台</div>
      </div>

      <div class="flex left-select">
        <el-select
          style="margin-right: 10px; background: #01182f"
          v-model="area"
          placeholder="请选择区域"
          size="mini"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in options"
            :key="item.instanceId"
            :label="item.cloudName"
            :value="item.instanceId"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="pool"
          placeholder="请选择资源池"
          size="mini"
          @change="changePool"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in  $store.state.CloudInfo "
            :key="item.instanceId"
            :label="item.cloudName"
            :value="item.instanceId"
          >
          </el-option>
        </el-select>
      </div>
      <div class="flex right-select">
        <el-select
          style="margin-right: 10px; background: #01182f"
          v-model="cloud"
          placeholder="请选择云类别"
          size="mini"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in options"
            :key="item.instanceId"
            :label="item.cloudName"
            :value="item.instanceId"
          >
          </el-option>
        </el-select>

        <!-- <div class="btn-group">
          <el-button
            @click="setDate('week')"
            :class="[isActive ? 'date-active ' : 'date']"
            size="mini"
            round
            >周</el-button
          >
          <el-button
            @click="setDate('month')"
            :class="[!isActive ? 'date-active ' : 'date']"
            size="mini"
            round
            >月</el-button
          >
        </div> -->
      </div>
    </div>
    <div class="main">
      <left></left>
      <middle
        class="flex-1"
        ref="mid"
      ></middle>
      <right></right>
    </div>
    <div class="footer flex">
      <div
        class="flex"
        style="padding: 0 10px; width: 100%"
      >
        <div class="tab flex-1">
          <box-tabel title="租户资源"></box-tabel>
        </div>
        <div
          class="slider flex-1 flex column"
          v-if="isHome"
        >
          <box-carousel></box-carousel>
        </div>
        <div :class="['tab', 'flex-1', !isHome ? 'pl10' : '']">
          <box-tabel title="业务系统"></box-tabel>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import left from "./left.vue";
import right from "./right.vue";
import middle from "./middle.vue";
import boxTabel from "../components/tabel";
import boxTitle from "../components/title";
import boxCarousel from "../components/carousel";
import base from "../mixins/index";

export default {
  mixins: [base],
  components: { middle, left, right, boxTabel, boxTitle, boxCarousel },
  data() {
    return {
      scale: `transform:scale(1,1)`,
      isActive: true,
      isHome: true,
      area: "全部",
      pool: "1",
      cloud: "全部",
      options: [],
      value: "",
      fileList: [],
    };
  },
  mounted() {
    console.log(2223,this.$store.state.all.allData)
    let width = window.innerWidth;
    let height = window.innerHeight;
    let wp = (width / 1920).toFixed(5);
    this.scale = `zoom:${wp}`;
    // console.log(this.scale);

    this.$store.dispatch("getCloudInfo").then((res) => {});
    this.getAllData();
  },
  methods: {
    setDate(type) {
      this.isHome = !this.isHome;
      // console.log(this.isHome);
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../styles/main.less");
.warpper {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  //   height: 1080px;
  // width: 1920px;
  background: url("../assets/bg.png") no-repeat;
  background-size: 100% 100%;

  .header {
    position: relative;
    height: 110px;
    width: 100%;
    // text-align: center;

    .header-title {
      width: 100%;
      height: 110px;
      text-align: center;
      > img {
        height: 110px;
        width: 1780px;
        margin: auto;
      }
      // color: #fff;
      // position: absolute;
      // font-size: 40px;

      .title {
        font-size: 40px;
        color: #fff;
        margin-top: -90px;
        margin-left: 15px;
        letter-spacing: 10px;
      }
    }
  }
  .slider {
    padding: 0 10px;
  }
  .footer {
    // display: flex;
    height: 260px;
    width: 100%;
  }
  .main {
    display: flex;
    flex: 1;
    flex-direction: row;
  }
}
.left-select {
  position: absolute;
  bottom: 0px;
  left: 20px;
}
.right-select {
  position: absolute;
  bottom: 0px;
  right: 80px;
}
/deep/ .el-select-dropdown {
  background: #01182f;
  border: 1px solid #18c1fd;
  .el-select-dropdown__item {
    color: #fff;
  }
  .hover {
    background: #18c2ff;
  }
}
/deep/ .el-input__inner {
  background: #01182f;
  border: 1px solid #18c1fd;
  color: #fff;
}

.date-active {
  background: #0083ce;
  border: 1px solid #00fff6;
  color: #00d8ff;
}
.date {
  background: #05274a;
  border: 1px solid #008ab5;
  color: #1ac9ff;
}
</style>